<template>

    <div id="vislog" class="w-h-100 pos-r flex-1 apply-container" style="box-sizing: border-box;overflow:hidden;">
        <div class="w-h-100 ver-flex pos-a" style="box-sizing: border-box; padding: 6px;">
            <div style="box-sizing: border-box;">
                <el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
                    <el-form class="box-f" ref="queryForm" :inline="true" label-width="auto">
                        <el-form-item :label="$t('qad00uAwj9ijf7wmKrNjx')">
                            <el-input style="width:120px;" v-model="searchOne" :placeholder="$t('gSoZiEnbOdnh4j3wBac3J')" clearable  />
                        </el-form-item>
                        <el-form-item :label="$t('u91EjgFceFtisaBrIHn6')">
                            <!-- <el-input placeholder="请选择访问类型" clearable  /> -->
                            <el-select style="width:120px;" v-model='searchTwo' :placeholder="$t('y7BfoGBwkaAn4uNj6CTn')" clearable>
                                <el-option :label="$t('svN3Fe24iWnJugDajPtA')" :value="0" />
                                <el-option :label="$t('ntmKPDu4WdPz6kJeKxjJ')" :value="1" />
                                <el-option :label="$t('v8TdRlOtAf8VLabd3TwPl')" :value="2" />
                                <el-option :label="$t('sOoxRrx0AYsBeS7624yz')" :value="3" />
                                <el-option :label="$t('tyvEqHkSxK7I6bvNg75cV')" :value="4" />
                            </el-select>
                        </el-form-item>
                        <el-form-item :label="$t('a0MgvFpCpbOtPs7oIYcnX')">
                            <!-- <el-input placeholder="请选择是否成功" clearable  /> -->
                            <el-select style="width:120px;" v-model='searchThree' :placeholder="$t('zlzvMy1sBxHAqxQUr5GBt')" clearable>
                                <el-option :label="$t('3EkGxudDEyOsInRv3Qt')" :value="0" />
                                <el-option :label="$t('qrSkKBzc_8rFov_4xDMdY')" :value="1" />
                            </el-select>
                        </el-form-item>
                        <el-form-item :label="$t('ykWc5Y4cIesOlgmThtXRl')">
                            <!-- <el-input placeholder="请选择时间" clearable  /> -->
                            <el-date-picker
                                v-model="searchFour"
								style="width: 240px;"
                                type="daterange"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                value-format="YYYY-MM-DD"
                            />
                        </el-form-item>
                        <el-form-item style="margin-right: 0">
                            <el-button @click="resetClick" icon="ele-Refresh"> {{ $t('eE3IedvHkKmnppI9FzCa7') }} </el-button>
                            <el-button @click="searchClick" type="primary" icon="ele-Search"> {{ $t('5fM07d4lwWlNvcG51m0ao') }} </el-button>
                            <el-popconfirm
                                confirm-button-text="确认"
                                cancel-button-text="取消"
                                icon="InfoFilled"
                                icon-color="#626AEF"
                                :title="$t('0JiI6ygjUnVwv7onISsC')"
                                @confirm="delClick(getData)"
                            >
                                <template #reference>
                                    <el-button v-if="$hasPer('vislog:empty')" type="danger" icon="ele-Delete"> {{ $t('dseZasLb9jVlm4w3Zog0') }} </el-button>
                                </template>
                            </el-popconfirm>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>

            <div style="box-sizing: border-box;margin-top: 8px;" class="flex-1 pos-r">
                <div class="pos-a w-h-100" style="box-sizing: border-box;">
                    <el-card class="box-card w-h-100" shadow="hover" style="">
                        <div style="" class="w-h-100 ver-flex">
                            <div class="flex-1 pos-r">
                                <div class="pos-a w-h-100">

                                    <el-table :data="list" class="w-h-100" border style="width: 100%" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)">
                                        <el-table-column type="index" :label="$t('mypbV2IeRm6WQyRbsoib')" width="55" align="center" :index="indexMethod" />
                                        <el-table-column prop="name" :label="$t('cHg4ZFJlcHvwTwtklkie')"  align="center" :show-overflow-tooltip="true" />
                                        <el-table-column :label="$t('nsgAeMdn7nJc3jCcwkAj0')"  align="center" :show-overflow-tooltip="true">
                                            <template #default="scope">
                                                <span v-for="item in LoginType" :key="item.code">
                                                    {{ Number(item.code) === Number(scope.row.visType) ? item.value : '' }}
                                                </span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column :label="$t('aYoh21Dz16S6o18X1IfC8')" align="center" :show-overflow-tooltip="true">
                                            <template #default="scope">
                                                <span v-for="item in YesOrNot" :key="item.code">
                                                    {{ Number(item.code) === Number(scope.row.success) ? item.value : '' }}
                                                </span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="account" :label="$t('qxM1r7TxzFjG9Yug67O')" align="center" :show-overflow-tooltip="true" />
                                        <el-table-column prop="visTime" :label="$t('pBte6Vseu75wySAcC9ob4')" align="center" :show-overflow-tooltip="true" />
                                        <el-table-column :label="$t('zKDqLt0KBzwdoJgiQgoj')" align="center" >
                                            <template #default="scope">
                                                <el-button v-if="$hasPer('vislog:view')" class="icon-e" @click="lookClick(scope.row)" icon="ele-Edit" size="small" text type="primary"> {{ $t('w_53isrfamxoT1wPmmZyS') }} </el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </div>
                            <div style="height: 30px;margin-top: 20px;" class="hr-flex-start">
								<el-pagination
									v-model:currentPage="pageNo"
									v-model:page-size="pageSize"
									:total="totalRows"
									:page-sizes="[10, 20, 50, 100]"
									small
									background
									@size-change="handleSizeChange"
									@current-change="handleCurrentChange"
									layout="total, sizes, prev, pager, next, jumper"
									class="w-h-100"
								/>
							</div>
                        </div>
                    </el-card>
                </div>
            </div>
        </div>
        <VislogDetail
            :lookInfo="lookInfo"
            :isLookDialog="isLookDialog"
            @cancelLookClick="cancelLookClick"
        />
    </div>
    
</template>
<script lang="ts">
import { defineComponent, ref, onMounted , reactive , toRaw } from 'vue'
import getTableData from '/@/utils/getTableData'
import { sysVisLogPage , sysEnumDataList , sysVisLogDelete } from '/@/api/manage/manage.ts'
import VislogDetail from './component/vislog-detail.vue';
export default defineComponent( {
    name: 'vislog',
    components: {
        VislogDetail
    },
    setup(props){
        const LoginType = ref() // 0登陆、1登出、2注册、3改密、4授权登陆
        const YesOrNot = ref() // 0是、1否
        const isLookDialog = ref()
        const lookInfo = ref()
        const searchOne = ref()
        const searchTwo = ref()
        const searchThree = ref()
        const searchFour = ref()
        const searchObj = reactive({
            name : '',
        })
        /*** searchClick 查询按钮 */
        const searchClick = () => {
            console.log(searchThree,'searchThree')
            // return
            if(searchOne.value !== undefined){
                searchObj.name = searchOne.value
            }
            if(searchTwo.value !== undefined){Object.assign(searchObj,{visType: Number(searchTwo.value)})}
            if(searchThree.value !== undefined){Object.assign(searchObj,{success: Number(searchThree.value)})}
            if(searchFour.value !== undefined){
                Object.assign(searchObj,{searchBeginTime: toRaw(searchFour.value)[0]})
                Object.assign(searchObj,{searchEndTime: toRaw(searchFour.value)[1]})
            }
        }

        /*** resetClick 重置按钮 */
        const resetClick = () => {
            searchOne.value = ''
            searchTwo.value = ''
            searchThree.value = ''
            searchFour.value = ''

            searchObj.name = ''
            Object.assign(searchObj,{visType: ''})
            Object.assign(searchObj,{success: ''})
            Object.assign(searchObj,{searchBeginTime: ''})
            Object.assign(searchObj,{searchEndTime: ''})
        }

        /*** lookClick 详情按钮 */
        const lookClick = (val:any) => {
            let isShowType = true
            let isShowSuc = true
            LoginType.value.map((i:any) => {
                if(Number(i.code) === Number(toRaw(val).visType) && isShowType){
                    toRaw(val).visTypeVal = i.value
                    isShowType = false
                }
                return
            })
            YesOrNot.value.map((i:any) => {
                if(Number(i.code) === Number(toRaw(val).success) && isShowSuc){
                    toRaw(val).successVal = i.value
                    isShowSuc = false
                }
                return
            })
            lookInfo.value = toRaw(val)
            isLookDialog.value = true
        }

        /*** delClick 清空按钮 */
        const delClick = async (updateFun: Function) => {
            let res = await sysVisLogDelete()
            if(res.success){
                updateFun()
            }
        }

        /*** cancelLookClick 查看关闭事件 */
        const cancelLookClick = () => {
            isLookDialog.value = false
        }

        /*** GetMj 获取枚举 */
        const GetMj = async () => {
            let setArr = ['LoginType','YesOrNot']
            for(let i=0 ; i< setArr.length ; i++){
                try {
                    let res: { data: any[] } = await sysEnumDataList({enumName: setArr[i]})
                    // console.log(res.data,'enumName')
                    if(setArr[i] === 'LoginType'){
                        LoginType.value = res.data
                        console.log(res.data,'LoginType')
                    }else{
                        YesOrNot.value = res.data
                        console.log(res.data,'YesOrNot')
                    }
                } catch (err) {}
            }
        }
        onMounted(() => {
            GetMj()
        })
        return {
            ...getTableData(sysVisLogPage,{},searchObj),
            LoginType,
            YesOrNot,
            lookClick,
            isLookDialog,
            cancelLookClick,
            lookInfo,
            delClick,
            searchOne,
            searchTwo,
            searchThree,
            searchFour,
            searchClick,
            resetClick,
        }
    },
} )
</script>
<style scoped lang="scss">
    #vislog {
        .box-f{
            :deep(.el-form-item__label){
                padding: 0;
            }
        }
        :deep(.el-card__body) {
            height: 100%;
        }
        ul {

            list-style: none;

            li {
                cursor: pointer;

                &:hover {
                    color: red;
                }
            }
        }
        .icon-e{
            :deep(.el-icon){
                margin-right: 0px!important;
            }
        }
    }
</style>